<template>
  <div class="app-container">
    <div class="filter-container">
    </div>
    <div class="table-container">
      <Table :table="dataTable">
        <template
          slot-scope="props"
          slot="status"
        >
          <span>
            {{props.obj.row.statusWord}}
          </span>
        </template>
      </Table>
      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          v-if="pageshow"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchFeedBackList } from "@/api/table";
import format from "date-format";
import Table from "@/components/Table";
export default {
  data() {
    return {
      //总页码
      count: 0,
      //单页行数
      limit: 20,
      //页码
      currentPage: 1,
      searchInpt: "",
      searchLoading: false,
      pageshow: true,
      dataTable: {
        loading: false,
        border: true,
        hasOperation: false,
        tr: [
          {
            id: "1",
            label: "id",
            prop: "id",
            show: true
          },
          {
            id: "2",
            label: "用户昵称",
            prop: "nickName",
            show: true
          },
          {
            id: "3",
            label: "反馈消息",
            prop: "msg",
            show: true
          },
          {
            id: "4",
            label: "创建时间",
            prop: "createTime",
            show: true
          },
          {
            id: "5",
            label: "类型",
            prop: "typeName",
            show: true
          },
          {
            id: "6",
            label: "状态",
            prop: "statusWord",
            show: true
          }
        ],
        data: [],
        operation: {}
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getQinqinFeedBackList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getQinqinFeedBackList();
    },
    //时间格式化
    formatterTime(t) {
      if (t) {
        const newTime = format("yyyy-MM-dd hh:mm:ss", new Date(t)).split(" ");
        let time = "";
        time += newTime[0] + "\n" + newTime[1];
        return time;
      } else {
        return "";
      }
    },
    async getQinqinFeedBackList() {
      this.dataTable.loading = true;
      this.searchLoading = true;
      const res = await fetchFeedBackList();
      this.searchLoading = false;
      this.dataTable.loading = false;
      this.dataTable.data = [];
      this.count = res.data.length;
      res.data.forEach(item => {
        const data = {};
        data.id = item.id;
        data.nickName = item.nickName;
        data.msg = item.msg;
        data.type = item.type;
        item.type ? (data.typeName = "我有话说") : (data.typeName = "告诉卿卿");
        item.status
          ? (data.statusWord = "已处理")
          : (data.statusWord = "未处理");

        data.createTime = this.formatterTime(item.createTime);
        this.dataTable.data.push(data);
      });
      //前端分页
      this.dataTable.data = this.dataTable.data.slice(
        (this.currentPage - 1) * this.limit,
        this.currentPage * this.limit
      );
    }
  },
  components: {
    Table
  }
};
</script>
